<template>
    <div>
        <q-table
          class="bg-white shadow-1"
          :data="data"
          dense
          :columns="columns"
          row-key="id"
          separator="cell"
          selection="single"
          :selected.sync="selected"
          :filter="searchForm"
          :pagination.sync="pagination"
          :rows-per-page-options="[3, 5, 10, 20]"
          no-data-label="暂无数据"
          table-class="h-custom"
          @request="listGet"
        >
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th>
              <q-checkbox :disable="disable" indeterminate-value="some" dense v-model="props.selected" />
            </q-th>
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              {{ col.label }}
            </q-th>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td width="56">
              <q-checkbox :disable="disable" dense v-model="props.selected" />
            </q-td>
            <q-td key="siteName" :props="props">{{ props.row.siteName }}</q-td>
            <q-td key="siteCode" :props="props">{{ props.row.siteCode }}</q-td>
            <q-td key="companyName" :props="props">{{ props.row.companyName }}</q-td>
            <q-td key="companyCode" :props="props">{{ props.row.companyCode }}</q-td>
          </q-tr>
        </template>
        <template v-slot:pagination="props">
          <q-pagination
            v-model="pagination.page"
            color="light-blue"
            :max-pages="5"
            :max="pages"
            :boundaryLinks="true"
            :directionLinks="true"
          />
          共 {{ total }} 条
        </template>
        <template v-slot:top-right="props">
          <div class="row justify-between items-center">
            <q-input v-model="searchForm.val" dense />
            <q-select
              dense
              v-model="searchForm.key"
              options-dense
              emit-value
              map-options
              :options="columns"
              option-value="name"
            />
            <div class="q-gutter-sm q-ml-sm">
              <q-btn color="light-blue" dense label="查询" size="sm"/>
              <q-btn color="secondary" dense label="重置" size="sm"/>
            </div>
          </div>
        </template>
      </q-table>
</div>
</template>

<script>
export default {
  props: {
    url: {
      required: true,
      type: String
    },
    value: {}
  },
  data () {
    return {
      data: [],
      total: 0,
      loading: false,
      selected: [],
      pagination: {
        page: 1,
        rowsPerPage: 8,
        rowsNumber: 8,
        sortBy: '',
        descending: Boolean
      },
      searchForm: {
        key: 'name',
        val: ''
      },
      columns: [
        { name: 'siteName', required: true, label: '地点名称', align: 'left', field: 'siteName', sortable: true },
        { name: 'siteCode', required: true, label: '地点编码', align: 'left', field: 'siteCode', sortable: true },
        { name: 'companyName', required: true, label: '公司名称', align: 'left', field: 'companyName', sortable: true },
        { name: 'companyCode', required: true, label: '公司编码', align: 'left', field: 'companyCode', sortable: true }
      ],
      disable: false
    }
  },
  computed: {
    pages () {
      return Math.ceil(this.total / this.pagination.rowsPerPage)
    }
  },
  created () {
    this.listGet({ pagination: this.pagination })
  },
  watch: {
    'pagination.page' () {
      this.listGet({ pagination: this.pagination })
    },
    'selected' () {
      this.$emit('select', this.selected)
    }
  },
  methods: {
    async listGet (props) {
      let { page, rowsPerPage, sortBy, descending } = props.pagination
      this.loading = true
      await this.$api({
        method: 'post',
        url: this.url,
        params: {
          pageNo: page,
          pageSize: rowsPerPage,
          sort: sortBy,
          order: descending === true ? 'desc' : (descending === false ? 'asc' : '')
        },
        emulateJSON: true,
        successCallback: ({ data }) => {
          // 回显
          console.log(data)
          let selectedArr = this.selected
          // if (this.value !== '') {
          //   let vS = this.value + ''
          //   vS.split(',').forEach(v => {
          //     data.list.forEach(d => {
          //       if (v + '' === d.siteId + '') {
          //         selectedArr.push(d)
          //       }
          //     })
          //   })
          // }
          if (this.value !== '') {
            console.log(this.value)
            data.list.forEach(v => {
              if (v.siteId === this.value) {
                selectedArr.push(v)
              }
              if (v.companyId === this.value) {
                selectedArr.push(v)
              }
            })
          }
          this.selected = selectedArr
          this.loading = false
          this.total = data.total
          this.data = data.list
        },
        errorCallback (err) {
          console.log('未处理的业务级error：', err)
        }
      })
      this.pagination.page = page
      this.pagination.rowsPerPage = rowsPerPage
      this.pagination.sortBy = sortBy
      this.pagination.descending = descending
    }
  }
}
</script>
